import React from 'react'

/**
 * 覆盖到头像列表上用于显示付款二维码
 * @param {*} props 
 */
const showQrcode = (props) => {
  const { gameInfo, showQrcode, orientation, battleData, lftid } = props;
  // console.warn(parentProps);
  let finishList = battleData.finishList;
  let roomDescribe = battleData.room.roomDescribe
   
  let wrapperStyle = orientation === 'portrait' ? {
    position: 'absolute',
    left: '9%',
    top: '14%',
    width: '83%',
    height: '70%',
    zIndex: '99',
  } : {
    position: 'absolute',
    left: '25%',
    bottom: '4%',
    width: '25%',
    height: '7%',
    zIndex: '99',
  }

  var niuniu10Wrapper = {
    position: 'absolute',
    left: '9%',
    top: '20.5%',
    width: '83%',
    height: '65%',
    zIndex: '99',
  };

  var niuniu6Wrapper = {
    position: 'absolute',
    left: '9%',
    top: '14%',
    width: '83%',
    height: '70%',
    zIndex: '99',
  };

  var paodekuaiWrapper = {
    position: 'absolute',
    left: '9%',
    top: '14%',
    width: '83%',
    height: '65%',
    zIndex: '99',
  };

  var jinhuaWrapper = {
    position: 'absolute',
    left: '9%',
    top: '22%',
    width: '83%',
    height: '57%',
    zIndex: '99',
  }

  var showQrcodeStyle = {}
  var itemStyle = {
    height: '8.6%'
  };
  var paodekuai = {
    width: '80%',
    height: '32%',
  };
  var majiang = {
    width: '100%',
    height: '24%'
  };
  var niuniu10 = {
    height: '9.69%'
  };
  var niuniu6 = {
    width: '32%',
    height: '48%',
  };

  var jinhua = {
    height: '10%'
  }

  switch (gameInfo.name) {
    case '红中麻将':
    case '长沙麻将':
    case '惠州麻将':
    case '平江扎鸟':
      itemStyle = majiang
      break
    case '跑得快':
    case '新跑得快':
      itemStyle = paodekuai
      wrapperStyle = paodekuaiWrapper
      break
    case '欢乐三张':
      itemStyle = jinhua
      wrapperStyle = jinhuaWrapper
      break
    case '三公':
    case '平江开船':
    case '经典斗牛':
    case '斗公牛':
    case '点子牛':
      itemStyle = roomDescribe.maxPlayerCount === 6 ? niuniu6 : niuniu10
      wrapperStyle = roomDescribe.maxPlayerCount === 6 ? niuniu6Wrapper : niuniu10Wrapper
      break
  }
  
  return <div style={wrapperStyle} className="show-qrcode-wrapper">
    {
      finishList.map((item) => 
        <div style={itemStyle} onClick={ showQrcode.bind(this, item) } key={item.nickname}>
        </div>
      )
    }
  </div>
}

export default showQrcode;